import React from 'react'
import {render} from 'react-dom'
// 通用样式
import './statics/css/common.less'
// 定义组件
class Hello extends React.Component {
  render() {
    // return 里面书写jsx语法  多个语句必须有一个顶级容器, 因为只识别第一个元素多个会报错
    // 大括号{}里面是表表达式  {}里面是JS对象
    // 注释 jsx中只能用/**/ 即return中的JSX语法
    // class样式关键字用className代替  className="text"
    // style 内联 style={{fontSize:25px,color:red}}  是驼峰式遵循js对象的要求
    // 插值表达式： {}
    // 事件 onClick={this.方法名}  方法不能是static静态的
    // 注意： Each child in an array or iterator should have a unique "key" prop.  数组或者迭代器应该携带唯一的key,能提高渲染效率
    // 循环 map 判断语句  三目表达式

    // 代码分离方案  因为我们现在讲所有代码放在一个文件中并不是号的方案，叫相关组件文件提出
    // modules页面模块层（页的入口文件，子模块subpage）  业务层
    // components:组件层 公用组件

    // props state
    // this.props.name constructor(props){ super(props)  this.state={}}
    // props不能被自己修改，调用者传入
    // state可以修改  setState

    // 智能组件（业务组件） 与木偶组件 （功能组件，不做业务处理）
    // React中的单位就是‘组件’

    // 生命周期hook
    // render(){return 返回jsx模板} constructor(){}初始化state
    // componentDidMount模板渲染完了（ajax请求，setState,获取网络数据）  --》
    // shouldComponentUpdate主要用于性能优化 --》
    // componentDisUpdata更新完成，用于清空，更新数据 props和state变化的时候就会触发更新，，不会去didMount --》
    // componentWillUnmount组件销毁之前，储存一些特殊信息，清理setTimeout
    let arr = ['a','b','c'];
    let isShow = false;
    return (
      <div>
        <p className="text">好的！知道了！测试啦!星的啦，，嗯嗯</p>
        <p style={{fontSize: '25px', color: 'red'}}>好的！知道了！测试啦!星的啦，，嗯嗯</p>
        <p onClick={this.clickHandler.bind(this)}>好的！知道了！测试啦!星的啦，!</p>
        <ul>
          {arr.map((item, index) => {
            return <li key={index}>{index}--{item}</li>
          })}
        </ul>
        <h2>副标题</h2>
        {isShow ? <p>真的</p> : <p>假的</p>}
      </div>
    );
  }
  clickHandler(event) {
    event.preventDefault();
    // 里面的this为undefined,所以如果需要让其为该组件，需要在调用时，bind（this）如果该函数内部用到this，建议一直带着bind
    // bind(this)是ES5
    console.log("你点了我!!!!!",typeof this)
  }
}

render(
  <Hello/>,
  document.getElementById('app')
)
